<template>
	<view>
		<view class="from">
			<van-field clearable label="头像" center use-button-slot :border="filedBorder">
				<view slot="button">
					<van-uploader :file-list="fileList" @after-read="afterRead">
						<view class="text-center pl-[30rpx] bg-[#fff] ">
							<van-image radius="20rpx" fit="cover" width="100rpx" height="100rpx"
								:src="postData.headImg" />
							<van-icon name="arrow" size="16" class="ml--20rpx-" />
						</view>
					</van-uploader>

				</view>

			</van-field>
			<van-divider />
			<van-field clearable label="昵称" icon="arrow" placeholder="请输入昵称" input-align="right" :border="filedBorder"
				:value="postData.userName" @input="onChangeField($event,1)" />
			<van-divider />
			<van-field style="display: none;" clearable label="手机号" icon="arrow" placeholder="请输入手机号"
				input-align="right" :border="filedBorder" :value="postData.phone" @input="onChangeField($event,2)" />
		</view>
		<sfc-button text="提交" @onClick="onClickButton" style="margin-top: 50rpx;"></sfc-button>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import uploadRequest from '@/utils/uploadRequest.js'
	import {
		postUserInfo
	} from '@/api/api.js'
	//const image=ref('/static/image/mypeo.png')
	const postData = ref({
		userName: '',
		phone: '',
		headImg: 'https://aw2025ht.kangye.xyz/api/profile/upload/tou.jpg',
	})
	const login_data = ref([])
	/*const headImg=ref('')
	const headImg=ref('')*/
	const fileList = ref([])
	const filedBorder = ref(false)
	const afterRead = async (res) => {
		try {
			uploadRequest({
				filePath: res.detail.file.tempFilePath,
				url: '/api/front/hitch/passengerManager/uploadAvatar',
				formData: {
					multipart: res.detail.file
				},
				header: {
					"Authori-zation": uni.getStorageSync('token'),
					"Content-Type": "multipart/form-data"
				},
			}).then(result => {
				if (result.code == 200) {
					//image.value = result.data
					postData.value.headImg = result.data
				}

			})

		} catch (error) {
			console.log(error)
			//TODO handle the exception
		}
	}
	const onChangeField = (ev, type) => {
		console.log(ev)
		console.log(ev.detail)
		console.log(type)
		if (type == 2) {
			const phoneRegex = /1\d{10}$/;
			if (!phoneRegex.test(ev.detail)) {
				uni.showToast({
					title: '请输入有效的手机号',
					duration: 1000,
					icon: 'none'
				});
				return;
			} else {
				postData.value.phone = ev.detail
			}


		}
		if (type == 1) {
			postData.value.userName = ev.detail
		}
	}
	const onClickButton = () => {
		const phoneRegex = /1\d{10}$/;
		if (!phoneRegex.test(postData.value.phone)) {
			uni.showToast({
				title: '请输入有效的手机号',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		console.log(postData.value)
		console.log(postData.value.userName)
		console.log(postData.value.phone)


		postUserInfo(postData.value).then(res => {
			console.log(res)
			if (res.code == 200) {

				console.log(postData.value.headImg);
				if (postData.value.headImg != null) {
					login_data.value.avatar = postData.value.headImg;
				}
				if (postData.value.userName != null) {
					login_data.value.nikeName = postData.value.userName;
				}
				if (postData.value.phone != null) {
					login_data.value.phone = postData.value.phone;
				}
				uni.setStorageSync('login_data', login_data.value);
				console.log(login_data.value, 123);
				// 成功，返回上一级
				uni.showToast({
					title: '修改成功',
					duration: 1000,
					icon: 'success'
				});

				// 使用 setTimeout 延迟跳转，等待提示框消失
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		}).catch(er => {
			console.log(er)
		})
	}
	onShow(() => {
		login_data.value = uni.getStorageSync('login_data')
		console.log(login_data.value, 123)
		postData.value = {
			userName: login_data.value.nikeName,
			phone: login_data.value.phone,
			headImg: login_data.value.avatar,
		}
	})
</script>

<style scoped>
	.from {
		margin: 30rpx 20rpx;
		border-radius: 15rpx;
		padding: 10rpx;
		background-color: #fff;
	}

	::v-deep .van-cell {
		padding: 30rpx 16rpx !important;
		border: 0rpx;
	}

	::v-deep .van-field__label {
		color: #111111;
		font-size: 36rpx;
		font-weight: 500;
	}

	::v-deep .van-field__placeholder {
		font-size: 34rpx;
		color: #999999
	}

	::v-deep .van-field__control--right {
		font-size: 34rpx !important;
		color: #999999 !important;
	}

	.text-center {
		display: flex;
		align-items: center;
	}
</style>